@layout("/common/_container.html"){
<style>
			.left,
			.right {
				width: 40%;
				float: left;
				height: 200px;
				border: 1px solid #aaa;
				overflow:auto;
			}
			
			.center {
				float: left;
				width: 18%;
				height: 200px;
			}
			
			.go_is,
			.go_no {
				background-color: #008000;
				color: #fff;
				text-align: center;
				margin: 0 auto;
				margin-top: 30px;
				width: 80%;
				padding: 5px 0;
			}
			
			.keep {
				width: 80px;
				height: 30px;
			}
			
			.contain {
				overflow: hidden;
			}
			
			.footer {
				width: 100%;
				text-align: center;
				clear: both;
				margin-top: 50px;
			}
			li{
				list-style: none;
			}
			.wid{
				width: 50px;
			}
		.flex{
			display: flex;
			justify-content: space-between;
		}
		</style>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>商品推荐</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-5">
                        <div class="row">
							<div class="col-sm-12">
								<#SelectCon id="goods1" name="商品分类" >
								<option id="goodscats1" value="">请选择</option>
								</#SelectCon>
							</div>
							<div class="col-sm-12">
								<#SelectCon id="goods2" name="二级分类">
								<option id="goodscats2" value="">请选择</option>
								</#SelectCon>
							</div>
							<div class="col-sm-12">
								<#SelectCon id="goods3" name="三级分类" >
								<option id="goodscats3" value="">请选择</option>
								</#SelectCon>

							</div>
							<div class="col-sm-6"><#NameCon id="shopName" name="店铺" placeholder="店铺" />
							</div>
							<div class="col-sm-6"><#NameCon id="goodsName" name="商品" placeholder="商品" />
							</div>
							<div class="col-sm-3">
                                <#button name="搜索" icon="fa-search" clickFun="Goods.search()"/>
                            </div>
                        </div>

                        <div class="hidden-xs" id="GoodsTableToolbar" role="group">
                            @if(shiro.hasPermission("/goods/add")){
                                <#button name="添加" icon="fa-plus" clickFun="Goods.openAddGoods()"/>
                            @}
                            @if(shiro.hasPermission("/goods/update")){
                                <#button name="修改" icon="fa-edit" clickFun="Goods.openGoodsDetail()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/goods/delete")){
                                <#button name="删除" icon="fa-remove" clickFun="Goods.delete()" space="true"/>
                            @}
                        </div>
                        <#table id="GoodsTable"/>
                    </div>
                    <div class="col-sm-2"></div>
                    <div class="col-sm-5">
                        <div class="row">
							<div class="col-sm-12">
								<#SelectCon id="goods11" name="商品分类" >
								<option id="goodscats11" value="">请选择</option>
								</#SelectCon>
							</div>
							<div class="col-sm-12">
								<#SelectCon id="goods21" name="二级分类">
								<option id="goodscats21" value="">请选择</option>
								</#SelectCon>
							</div>
							<div class="col-sm-12">
								<#SelectCon id="goods31" name="三级分类" >
								<option id="goodscats31" value="">请选择</option>
								</#SelectCon>

							</div>
							<!-- <div class="col-sm-6"><#NameCon id="shopName1" name="店铺" />
							</div>
							<div class="col-sm-6"><#NameCon id="goodsName1" name="商品" />
							</div> -->
							<div class="col-sm-12">
							<#SelectCon id="style" name="类型" >
								<option  value="">请选择</option>
								<option  value="0">推荐</option>
								<option  value="1">热销</option>
								<option  value="2">新品</option>
								<option  value="3">精品</option>

							</#SelectCon>
                               <!--  <#button name="搜索" icon="fa-search" clickFun="Goods1.search()"/> -->
                            </div>
                        </div>

                        <div class="hidden-xs" id="GoodsTableToolbar1" role="group">
                            @if(shiro.hasPermission("/goods/add")){
                                <#button name="添加" icon="fa-plus" clickFun="Goods.openAddGoods()"/>
                            @}
                            @if(shiro.hasPermission("/goods/update")){
                                <#button name="修改" icon="fa-edit" clickFun="Goods.openGoodsDetail()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/goods/delete")){
                                <#button name="删除" icon="fa-remove" clickFun="Goods.delete()" space="true"/>
                            @}
                        </div>
                        <#table id="GoodsTable1"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="app">
			<div class="contain">
				<div class="left">
					<li v-for="v in list">
						<label><input type="checkbox" :value="v.id" />{{v.name}}</label>
					</li>
				</div>
				<div class="center">
					<div class="go_is" v-on:click="go_is()">>></div>
					<div class="go_no" v-on:click="go_no()">
						<<</div>
					</div>
					<div class="right">
						<li v-for="v in list2" class="flex">
							<label><input type="checkbox" class="www" :value="v.id" />{{v.name}}</label>
							<label><input type="text" class="wid" v-model="v.dataSort"/></label>
						</li>
					</div>
				</div>
				<div class="footer">
					<button class="keep" v-on:click="keep()">保存</button>
				</div>
			</div>
</div>
		
<script src="${ctxPath}/static/modular/huamao/goods/goods_Recom.js"></script>
<script src="${ctxPath}/static/modular/huamao/public/goodscats.js"></script>
<script src="${ctxPath}/static/js/jquery.min.js"></script>
<script src="${ctxPath}/static/js/vue.min.js"></script>
<script type="text/javascript">
	var list = [/* {
				name: '产品一',
				id: '001',
				isRecommend: '否'
			},
			{
				name: '产品二',
				id: '002',
				isRecommend: '否'
			},
			{
				name: '产品三',
				id: '003',
				isRecommend: '否'
			},
			{
				name: '产品四',
				id: '004',
				isRecommend: '否'
			} */
		];
		var list2 = [/* {
				name: '产品2',
				id: '0011',
				isRecommend: '是'
			},
			{
				name: '产品二2',
				id: '0012',
				isRecommend: '是'
			},
			{
				name: '产品三2',
				id: '0013',
				isRecommend: '是'
			},
			{
				name: '产品四2',
				id: '0014',
				isRecommend: '是'
			} */
		];
		var vm = new Vue({
			el: '#app',
			data: {
				list: list,
				list2:list2
			},
			methods: {
				go_is: function() {
					go_is();
				},
				go_no: function() {
					go_no();
				},
				keep:function(){
					keep();
				}
			}
		})
		function go_is() {
			var checked = $('.left input[type=checkbox]:checked');
			$('input').removeAttr('checked');
			if(checked.length>0){
				$.each(checked,function(i,v){
					var cid = v.value;
					for(var s = 0;s<list.length;s++){
						if(list[s].id==cid){
							list2.push(list[s]);
							list.splice(s,1);
						}
					}
				})
			}
		};

		function go_no() {
			var checked = $('.right input[type=checkbox]:checked');
			$('input').removeAttr('checked');
			if(checked.length>0){
				$.each(checked,function(i,v){
					var cid = v.value;
					for(var s = 0;s<list2.length;s++){
						if(list2[s].id==cid){
							list.push(list2[s]);
							list2.splice(s,1);
						}
					}
				})
			}
		}
		
		function keep(){
			var to_right=[];
			var to_left=[];
			var sdx=[];
			$.each(list,function(i,v){
                if(v.isRecommend=='是'){
                    to_left.push(list[i].id)
                }
            })
			$.each(list2,function(i,v){
				if(v.isRecommend=='否'){

					to_right.push(list2[i].id)

				}
			})

			/* alert(to_right+'改为推荐;'+to_left+'改为不推荐');*/
			
		 	
			var style=$("#style").val();
			var goods11=$("#goods11").val();
            var goods21=$("#goods21").val();
            var goods31=$("#goods31").val();
            var goods;
            if(goods31!=null && goods31!=''){
                goods=goods31;
            }else{
                if(goods21!=null && goods21!=''){
                    goods=goods21;
                }else{
                    if(goods11!=null && goods11!=''){
                        goods=goods11;
                    }
                }
            }
            if(vm.list2.length != 0) {
                if (style == '' || typeof style == 'undefined') {
                    Feng.success("请选择推荐类型！");
                    return;
                }
            }
            if(vm.list2.length == 0){
				if (goods == '' || typeof goods == 'undefined'){
                    Feng.success("请选择商品分类类型！");
                    return;
                }

            }
            var obj={
                style:style,
                goods:goods

            }
           	var lists= JSON.stringify(vm.list2);
			$.post("/recommends/addGoodsList",{
				"to_right":lists,
                "catId":goods,
				"dataType":style}
				,function(result){
                    Feng.success("更改推荐商品成功！");
	  		})
			
		}
</script>
	
	
	<!-- <script type="text/javascript">
		var list = [];
		var list2=[];
		new Vue({
			el: '#app',
			data: {
				list: list,
				list2:list2
			},
			methods: {
				go_is: function() {
					go_is();
				},
				go_no: function() {
					go_no();
				},
				keep:function(){
					keep();
				}
			}
		})
		function go_is() {
			var checked = $('.left input[type=checkbox]:checked');
			$('input').removeAttr('checked');
			if(checked.length>0){
				$.each(checked,function(i,v){
					var cid = v.value;
					for(var s = 0;s<list.length;s++){
						if(list[s].id==cid){
							list2.push(list[s]);
							list.splice(s,1);
						}
					}
				})
			}
		};

		function go_no() {
			var checked = $('.right input[type=checkbox]:checked');
			$('input').removeAttr('checked');
			if(checked.length>0){
				$.each(checked,function(i,v){
					var cid = v.value;
					for(var s = 0;s<list2.length;s++){
						if(list2[s].id==cid){
							list.push(list2[s]);
							list2.splice(s,1);
						}
					}
				})
			}
		}
		
		function keep(){
			var to_right=[];
			var to_left=[];
			$.each(list,function(i,v){
				if(v.isRecommend=='是'){
					to_left.push(list[i].id)
				}
			})
			$.each(list2,function(i,v){
				if(v.isRecommend=='否'){
					to_right.push(list2[i].id)
				}
			})
			alert(to_right+'改为推荐;'+to_left+'改为不推荐');
		}
	</script> -->

@}	
